<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <template v-for="(item, index) in el_col_items">
        <el-collapse-item  :title="item" :name="index" :key="index">
          <template v-for="btn in btns[index]">
            <el-button class="bt" :key="btn" plain>{{ btn }}</el-button>
          </template>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
import {
  getCollapseHeader,
  getQueryButton,
} from "../../assets/data/exhibition.js";
export default {
  data() {
    return {
      activeNames: ["2"],
      el_col_items: getCollapseHeader(),
      btns: getQueryButton(),
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
  computed: {
    tit: function () {
      return;
    },
  },
};
</script>

<style scoped>
.el-collapse {
  position: relative;
  left: 11%;
  width: 410px;
}
.button-bar {
  position: relative;
  font-weight: bolder;
  left: 15px;
  width: 350px;
}
.bt {
    font-weight:bold;
  margin: 5px;
  color: #589bc6;
}
</style>

<style>
.el-collapse-item__header {
  font-size: 16px;
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bolder;
  text-align: center;
}
.el-collapse-item__content {
  /* border: 1px solid red; */
  margin-bottom: 5px;
  padding: 12px;
}
</style>
